<template>
    <div class="table-btn-content">
        <div v-if="buttons.length <= 3">
            <template v-for="(btn, index) in buttons">
                <pub-download v-if="btn.isExport" :url="btn.exportUrl" :params="btn.data" :file-name="btn.fileName"
                    :key="index" :fileType="btn.fileType">
                    <template v-slot:default="slotProps">
                        <el-button :loading="slotProps.loading" type="primary" plain class="btn-text-export"> {{
                            btn.label }}</el-button>
                    </template>
                </pub-download>
                <el-button v-else :key="index + '1'" type="primary" plain @click="btn.event(btn.data)">{{ btn.label }}
                </el-button>
            </template>
        </div>
        <div v-else>
            <template v-for="(btn, index) in buttons.slice(0, 2)">
                <pub-download v-if="btn.isExport" :url="btn.exportUrl" :params="btn.data" :file-name="btn.fileName"
                    :key="index" :fileType="btn.fileType">
                    <template v-slot:default="slotProps">
                        <el-button :loading="slotProps.loading" type="primary" plain class="btn-text-export"> {{
                            btn.label }}</el-button>
                    </template>
                </pub-download>
                <el-button v-else :key="index + '1'" type="primary" plain @click="btn.event(btn.data)">
                    {{ btn.label }}
                </el-button>
            </template>
            <el-dropdown style="margin-left: 10px">
                <!-- <el-button type="primary" icon="el-icon-more-outline" plain>更多</el-button> -->
                <el-button type="primary" plain>
                    更多<i class="el-icon-arrow-down el-icon--right" />
                </el-button>
                <template #dropdown>
                <el-dropdown-menu>
                    <el-dropdown-item :disabled="btn.disabled" v-for="(btn, index) in buttons.slice(2)" :key="index" style="padding:5px 10px">
                        <pub-download v-if="btn.isExport" :url="btn.exportUrl" :params="btn.data"
                            :file-name="btn.fileName" :key="index" :fileType="btn.fileType">
                            <template v-slot:default="slotProps">
                                <el-button :loading="slotProps.loading" type="primary" plain class="btn-text-export"> {{
                                    btn.label }}</el-button>
                            </template>
                        </pub-download>
                        <div v-else type="primary" plain @click="clickItem(btn)">
                            {{ btn.label }}
                        </div>
                    </el-dropdown-item>
                </el-dropdown-menu>
                </template>
            </el-dropdown>
        </div>
    </div>
</template>

<script setup>
const props = defineProps({
    buttons: {
        type: Array,
        default() {
            return []
        }
    }
})

const clickItem = btn =>{
    if(btn.disabled) return 
    btn.event(btn.data)
}
</script>

<style scoped lang="scss"></style>